<template>
	<view class="content-box" @click="hideKeyboard">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('withdraw.sqtx')" :leftIcon="true"></navbar>
		
		<!-- 充值金额输入区域 -->
		<view class="recharge-input-area" @click.stop>
			<view class="input-label">{{ t('withdraw.qsrtxje') }}</view>
			<view class="amount-display" @click="showKeyboard">
				<text class="amount">{{ inputAmount }}</text>
				<text class="currency">USDT</text>
			</view>
		</view>
		
		<!-- 快速选择金额 -->
		<view class="quick-amount-grid" @click.stop>
			<view class="quick-amount-item" 
				v-for="amount in quickAmounts" 
				:key="amount" 
				@click="selectAmount(amount)">
				{{ amount }}
			</view>
		</view>
		
		<!-- 可用余额 -->
		<view class="lab">
			<view class="left">
				<text class="text1">{{t('withdraw.kyye')}}</text>
				<text class="text2">{{ userBalance }}</text>
				<text class="text3">USDT</text>
			</view>
			<view class="max-btn" @click="setMaxAmount">MAX</view>
		</view>
		
		<!-- 自定义键盘 -->
		<view class="keyboard" v-if="showKeyboardFlag" @click.stop>
			<view class="keyboard-row">
				<view class="key" @click="inputKey('1')">1</view>
				<view class="key" @click="inputKey('2')">2</view>
				<view class="key" @click="inputKey('3')">3</view>
			</view>
			<view class="keyboard-row">
				<view class="key" @click="inputKey('4')">4</view>
				<view class="key" @click="inputKey('5')">5</view>
				<view class="key" @click="inputKey('6')">6</view>
			</view>
			<view class="keyboard-row">
				<view class="key" @click="inputKey('7')">7</view>
				<view class="key" @click="inputKey('8')">8</view>
				<view class="key" @click="inputKey('9')">9</view>
			</view>
			<view class="keyboard-row">
				<view class="key dot" @click="inputKey('.')">.</view>
				<view class="key" @click="inputKey('0')">0</view>
				<view class="key delete" @click="deleteKey">
					<image src="/static/icon/delete.svg" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="submit-btn btn-primary" v-if="!showKeyboardFlag && inputAmount!=0" @click="toAddress">
			{{t('common.next')}}
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { useI18n } from 'vue-i18n';
	import { userApi, withdrawApi } from '@/utils/api.js';
	const { t, locale } = useI18n();
	
	// 输入的金额
	const inputAmount = ref('0.00');
	
	// 控制键盘显示状态
	const showKeyboardFlag = ref(false);
	
	// 用户余额信息
	const userBalance = ref(0);
	const loading = ref(false);
	
	// 显示键盘
	const showKeyboard = () => {
		showKeyboardFlag.value = true;
	};
	
	// 隐藏键盘
	const hideKeyboard = () => {
		showKeyboardFlag.value = false;
	};
	
	// 快速选择金额
	const quickAmounts = [100, 500, 1000, 3000, 5000, 10000, 20000, 50000];
	
	// 选择预设金额
	const selectAmount = (amount) => {
		inputAmount.value = amount.toString();
		showKeyboardFlag.value = true; // 选择金额后显示键盘，方便继续编辑
	};
	
	// 输入数字
	const inputKey = (key) => {
		// 如果当前值是0.00，则清除后再输入
		if (inputAmount.value === '0.00') {
			if (key === '.') {
				inputAmount.value = '0.';
			} else {
				inputAmount.value = key;
			}
			return;
		}
		
		// 处理小数点
		if (key === '.') {
			if (inputAmount.value.includes('.')) {
				return; // 已经有小数点了，不再添加
			}
		}
		
		// 限制小数点后只能有两位
		if (inputAmount.value.includes('.')) {
			const parts = inputAmount.value.split('.');
			if (parts[1] && parts[1].length >= 2 && key !== '.') {
				return; // 已经有两位小数了
			}
		}
		
		// 添加输入的数字或小数点
		inputAmount.value += key;
	};
	
	// 删除数字
	const deleteKey = () => {
		if (inputAmount.value.length > 1) {
			inputAmount.value = inputAmount.value.slice(0, -1);
		} else {
			inputAmount.value = '0.00';
		}
	};
	// 获取用户余额
	const getUserBalance = async () => {
		try {
			loading.value = true;
			const response = await userApi.getUserDetail();
			if (response && response.code === 0 && response.data) {
				// 使用用户的可用余额作为提现余额
				userBalance.value = response.data.availableBalance || 0;
			} else {
				console.error('获取用户余额失败:', response);
				uni.showToast({
					title: response?.msg || '获取余额失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取用户余额失败:', error);
			uni.showToast({
				title: '网络错误，请重试',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};
	
	// 设置最大金额
	const setMaxAmount = () => {
		inputAmount.value = userBalance.value.toString();
		showKeyboardFlag.value = true;
	};
	
	// 验证提现金额
	const validateAmount = () => {
		const amount = parseFloat(inputAmount.value);
		if (isNaN(amount) || amount <= 0) {
			uni.showToast({
				title: '请输入有效金额',
				icon: 'none'
			});
			return false;
		}
		if (amount > userBalance.value) {
			uni.showToast({
				title: '提现金额不能超过可用余额',
				icon: 'none'
			});
			return false;
		}
		return true;
	};
	
	// 前往地址页
	const toAddress = () => {
		if (!validateAmount()) {
			return;
		}
		uni.navigateTo({
			url: `/pages/home/address?amount=${inputAmount.value}`
		});
	};
	
	onMounted(() => {
		getUserBalance();
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}
	.lab{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		margin-top: 48.78rpx;
		.left{
			color: #000;
			.text1{
				font-size: 31.4rpx;
				font-weight: 400;
			}
			.text2{
				font-size: 27.91rpx;
				font-weight: 400;
			}
			.text3{
				font-size: 20.93rpx;
				font-weight: 400;
				margin-left: 6.97rpx;
			}
		}
		.max-btn{
			width: 130.81rpx;
			line-height: 69.77rpx;
			text-align: center;
			border-radius: 35rpx;
			background: linear-gradient(90deg, #0CC19B 0%, #5BDCDE 34.03%, #0591C6 65.97%, #0278DC 100%);
			font-size: 24.42rpx;
			font-weight: 500;
			color: #fff;
			
		}
	}
	.submit-btn{
		width: 570.35rpx;
		height: 97.67rpx;
		border-radius: 26.16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		margin: 60rpx auto 0;
		position: fixed;
		bottom: 69.69rpx;
		left: 88.85rpx;
	}
	.recharge-input-area {
		padding: 40rpx;
		margin-top: 20rpx;
		
		.input-label {
			color: #6C727F;
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
		
		.amount-display {
			display: flex;
			justify-content: center;
			align-items: baseline;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			cursor: pointer;
			
			.amount {
				font-size: 48.84rpx;
				font-weight: 900;
				color: #121826;
				padding: 0 40rpx;
				border-bottom: 1px solid #E5E7EB;
			}
			
			.currency {
				font-size: 20.93rpx;
				font-weight: 500;
				color: 333;
				margin-left: 10rpx;
			}
		}
	}
	
	.quick-amount-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0 40rpx;
		margin-top: 40rpx;
		gap: 13.94rpx;
		width: 100%;
		box-sizing: border-box;
		.quick-amount-item {
			height: 69.77rpx;
			background-color: #fff;
			border-radius: 34rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 5.24rpx;
			font-size: 24.42rpx;
			font-weight: 500;
			color: #000;
			width: 120.81rpx;
		}
	}
	
	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx;
		background: #F9FAFB;
		border-radius: 69.77rpx 69.77rpx 0rpx 0rpx;
		
		.keyboard-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.key {
				width: 200rpx;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 48rpx;
				font-weight: 600;
				color: #121826;
				
				&.delete {
					image {
						width: 54rpx;
						height: 54rpx;
					}
				}
			}
		}
	}
</style>